<template>
    <div class="cont mb-4">
        <CustomQuery @submit="changeQuery" :form-columns="queryList"></CustomQuery>
    </div>
    <div class="cont">
        <CustomTable selection :columns="columns" :data-source="data">
            <template #column-idCardAvatarPhoto="{ record }">
                <img class="w-18 h-18 rounded-full" :src="record.idCardAvatarPhoto" alt="身份证正面照片">
            </template>
            <template #column-photoOfIdCardAndNationalEmblem="{ record }">
                <img class="w-18 h-18 rounded-full" :src="record.photoOfIdCardAndNationalEmblem" alt="身份证国徽照片">
            </template>
            <template #column-state="{ column }">
                <a-tag color="green">活跃</a-tag>
            </template>
            <template #column-action="{ record }">
                <div class="flex-between">
                    <a-button type="primary">通过</a-button>
                    <a-button type="primary" danger>驳回</a-button>
                </div>
            </template>
        </CustomTable>
    </div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/customTable/CustomTable.vue';
import CustomQuery from '@/components/customQuery/CustomQuery.vue';
import { CustomQueryColumns, CustomQueryValue } from '@/components/customQuery/types';
import { CustomTableColumns, CUstomTableData } from '@/components/customTable/types';

const router = useRouter()
const useGo = () => {
    router.push('/riderManagement/rider/add')
}

const queryList = reactive<CustomQueryColumns[]>([
    { label: '用户编号', key: 'userId', type: 'input' },
    { label: '真实姓名', key: 'name', type: 'input' },
    { label: '身份证号码', key: 'idNo', type: 'input' },
    {
        label: '状态', key: 'state', type: 'select', options: [
            { label: '状态: 全部', value: '1' },
            { label: '状态: 启用', value: '2' },
            { label: '状态: 禁用', value: '3' },
        ],value:'1'
    }
])

const changeQuery = (queryState: CustomQueryValue) => {
    alert('查询结果为' + JSON.stringify(queryState))
}

const data = ref<CUstomTableData[]>([])
const columns = reactive<CustomTableColumns[]>([
    {
        title: "用户编号",
        dataIndex: "code",
        key: "code",
    },
    {
        title: "姓名",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "身份证号码",
        dataIndex: "idNO",
        key: "idNO",
    },
    {
        title: "身份证头像照片",
        dataIndex: "idCardAvatarPhoto",
        key: "idCardAvatarPhoto",
        bodyCell: 'idCardAvatarPhoto'
    },
    {
        title: "身份证国徽照片",
        dataIndex: "photoOfIdCardAndNationalEmblem",
        key: "photoOfIdCardAndNationalEmblem",
        bodyCell: 'photoOfIdCardAndNationalEmblem'
    },
    {
        title: "状态",
        dataIndex: "state",
        key: "state",
        bodyCell: 'state'
    },
    {
        title: "时间",
        dataIndex: "time",
        key: "time",
    },
    {
        flag: 'ACTION',
        width: 140
    },
]);


onMounted(() => {
    for (let i = 0; i < 100; i++) {
        data.value.push(
            { code: '01', name: '已经很棒了', idNO: 166666666666666666, idCardAvatarPhoto: ',', photoOfIdCardAndNationalEmblem: '', state: '1', time: '2024-08-16', checked: true },
        )
    }
})
</script>

<style scoped></style>